<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="organizationRegister"
    @close="drawerReset"
    title="导入记录查看"
    cancelText="关闭"
    :showOkBtn="false"
    width="1000"
    showFooter
    isAbsolute
    getContainer=".page-wrapper"
  >
    <div class="box-drawer">
      <div class="drawer-table">
        <div class="table-tab">
          <div
            :class="['tab-item', item.value === drawerInfo.tabActive ? 'tab-active' : '']"
            v-for="item in tabArr"
            @click="changeTab(item.value)"
            :key="item.value"
          >
            {{ item.label }}
          </div>
          <div class="tab-download" v-show="drawerInfo.tabActive === 3">
            <a-button type="primary" :loading="downLoading" ghost @click="downLoadData">下载错误明细</a-button>
          </div>
        </div>

        <BasicTable @register="registerTable">
          <template #bodyCell="{ column, record, text }">
            <template v-if="column.dataIndex === 'endTimeRemainingDays'">
              <div class="last-time">
                <span class="time-num" v-if="record.endTimeRemainingDays || record.endTimeRemainingDays == 0">
                  {{ record.endTimeRemainingDays }}
                </span>
                <span>{{ record.endTimeRemainingDays || record.endTimeRemainingDays === 0 ? '天' : '永久' }}</span>
              </div>
            </template>
          </template>
        </BasicTable>
      </div>
    </div>
  </BasicDrawer>
</template>

<script lang="ts" setup>
import { reactive, ref, computed } from 'vue'
import { BasicDrawer, useDrawerInner } from '@/components/Drawer'
import { message } from 'ant-design-vue'
import { BasicTable, useTable } from '@/components/Table'
import { constantMap } from '@/types/enum'
import { cloneDeep } from 'lodash-es'
import { downExcel } from '@/utils/axios/request'
import api from '@/api'

const { batchDetailEnterpriseList } = api

const emit = defineEmits(['operateSuccess', 'register'])

const tabArr = [
  { label: '正确', value: 2 },
  { label: '错误', value: 3 }
]
const drawerInfo = reactive<any>({
  record: {},
  tabActive: 2
})

const downLoading = ref(false)
const [registerTable, { reload, setPagination, setTableData, setProps, getDataSource }] = useTable({
  api: batchDetailEnterpriseList,
  columns: [
    {
      title: '租户名称',
      width: 120,
      customEllipsis: true,
      dataIndex: 'orgName'
    },
    {
      title: '主机构税号',
      width: 140,
      customEllipsis: true,
      dataIndex: 'taxesNumber'
    },
    {
      title: '纳税人类型',
      width: 80,
      customEllipsis: true,
      dataIndex: 'taxesTypeDesc'
    },
    {
      title: '管理员手机号',
      width: 100,
      customEllipsis: true,
      dataIndex: 'contactPhone'
    },
    {
      title: '管理员邮箱',
      width: 160,
      customEllipsis: true,
      dataIndex: 'contactEmail'
    },
    {
      title: '备注',
      width: 100,
      customEllipsis: true,
      dataIndex: 'orgRemark'
    },
    {
      title: '剩余使用时间',
      width: 100,
      customEllipsis: true,
      align: 'right',
      dataIndex: 'endTimeRemainingDays'
    },
    {
      title: '电子税务局账号',
      width: 130,
      customEllipsis: true,
      dataIndex: 'taxesAccount'
    },
    {
      title: '所属税局',
      width: 140,
      customEllipsis: true,
      dataIndex: 'taxAreaCodeName'
    },
    {
      title: '错误原因',
      width: 120,
      customEllipsis: true,
      tooltipMaxWidth: '120px',
      dataIndex: 'batchDetailRemark',
      ifShow: () => drawerInfo.tabActive === 3
    }
  ],
  immediate: false, //初始化不请求数据
  pagination: { hideOnSinglePage: false }, // 只有一页时隐藏分页器
  showIndexColumn: true,
  scroll: { y: 'calc(100vh - 440px)' }
})

const operateSuccess = () => {
  setPagination({
    current: 1,
    pageSize: 10,
    total: 0
  })
  setProps({
    searchInfo: {
      batchNo: drawerInfo.record.batchNo,
      batchDetailStatus: drawerInfo.tabActive
    }
  })
  reload()
}

const changeTab = (value: number) => {
  if (value != drawerInfo.tabActive) {
    drawerInfo.tabActive = value
    operateSuccess()
  }
}

const [organizationRegister, { closeDrawer, changeOkLoading }] = useDrawerInner((data) => {
  drawerInfo.tabActive = 2
  drawerInfo.record = cloneDeep(data.record) || {}
  operateSuccess()
})
const downLoadData = async () => {
  const dataList = getDataSource() || []
  if (dataList.length === 0) {
    return message.warning('无错误数据导出')
  }

  downLoading.value = true
  try {
    let res = await downExcel(
      '/api/tenant/manager/batch/detail/enterprise/exportFailTopEnterpriseExcel',
      {
        batchDetailStatus: 3,
        batchNo: drawerInfo.record.batchNo
      },
      '错误明细列表'
    )
    downLoading.value = false
  } catch (error) {
    downLoading.value = false
  }
}
const drawerReset = () => {
  downLoading.value = false
}
</script>

<style lang="less" scoped>
.box-drawer {
  padding: 10px 0;
  position: relative;

  .drawer-table {
    position: relative;
    .table-tab {
      padding-left: 16px;
      border-bottom: 1px solid #e8e8e8;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      position: relative;
      .tab-item {
        font-size: 12px;
        color: #535d71;
        line-height: 17px;
        margin-right: 24px;
        padding-bottom: 8px;
        cursor: pointer;
        &.tab-active {
          color: #4aa353;
          font-weight: 600;
          position: relative;
          &::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 4px;
            background: #4aa353;
            border-radius: 100px 100px 0 0;
            left: 5px;
            bottom: -1px;
          }
        }
      }
      .tab-download {
        position: absolute;
        bottom: 6px;
        right: 0;
      }
    }
  }
}
.time-num {
  color: @primary-color;
}
</style>
